<template>
  <div>
    <el-form :inline="true" :model="query">
      <el-form-item>
        <el-input
          v-model="query.realName"
          placeholder="真實姓名"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="query.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadList"
          ><i class="el-icon-search"></i
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="selAll"
        ></el-button>
        <el-button type="success" round @click="dialogVisible = true"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!-------------------------------------查看----------------------------------------->
    <el-table :data="userList" stripe style="width: 100%">
      <el-table-column prop="tel" label="电话" width="180"> </el-table-column>
      <el-table-column prop="realName" label="姓名" width="180">
      </el-table-column>

      <el-table-column label="头像" show-overflow-tooltip>
        <template slot-scope="scope">
          <img
            :src="scope.row.headImg"
            alt=""
            style="width: 65px; height: 65px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日"> </el-table-column>
      <el-table-column prop="deptName" label="部门"> </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="warning" round @click="editUser(scope.row.id)"
            >修改</el-button
          >
          <el-popconfirm
            title="确定删除这条用户信息吗？"
            @confirm="delUser(scope.row.id)"
          >
            <el-button slot="reference" type="danger" round>删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>
    <!-------------------------------------添加----------------------------------------->
    <el-dialog
      title="添加人員"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="addUser" :model="addUser" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="addUser.tel"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
              <el-input v-model="addUser.realName"></el-input>
            </el-form-item>
            <!-- <el-form-item label="头像" prop="headImg" hidden>
              <el-input v-model="addUser.headImg" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="生日" prop="birthday">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="addUser.birthday"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="部门" prop="deptId">
              <el-select
                v-model="addUser.deptId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUsers">确 定</el-button>
      </span>
    </el-dialog>
    <!-------------------------------------修改----------------------------------------->
    <el-dialog
      title="修改人员"
      :visible.sync="dialogupdateCheck"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="updateUser" :model="updateUser" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="updateUser.tel"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
              <el-input v-model="updateUser.realName"></el-input>
            </el-form-item>
            <!-- <el-form-item label="头像" prop="headImg" hidden>
              <el-input v-model="addUser.headImg" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="生日" prop="birthday">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="updateUser.birthday"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="部门" prop="deptId">
              <el-select
                v-model="updateUser.deptId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogupdateCheck = false">取 消</el-button>
        <el-button type="primary" @click="udateUsers">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      updateUser: [],
      query: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        realName: "",
        dateRange: [],
      },
      addUser: {},
      deptList: [],
      dialogVisible: false,
      dialogupdateCheck: false,
    };
  },
  methods: {
    // 查询方法
    loadList() {
      this.$axios.post("/user/querry", this.query).then((res) => {
        this.userList = res.data.data.list;
        this.query.total = res.data.data.tool;
        this.deptList = res.data.data.dept;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadList();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadList();
    },
    selAll() {
      this.query.realName = "";
      this.query.dateRange = [];
      this.loadList();
    },
    // 添加方法
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addUsers() {
      this.$axios.post("/user/addUser", this.addUser).then((res) => {
        this.addUsers = {};
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.loadList();
          this.dialogVisible = false;
        } else {
          this.$message.error("添加失敗,用户已存在");
          this.dialogVisible = false;
        }
      });
    },
    // 删除方法
    delUser(id) {
      this.$axios.delete("user/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadList();
        }
      });
    },
    // 修改方法
    editUser(id) {
      this.dialogupdateCheck = true;
      this.$axios.get("user/" + id).then((res) => {
        this.updateUser = res.data.data.user;
      });
    },
    udateUsers() {
      this.$axios.put("user/", this.updateUser).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.dialogupdateCheck = false;
          this.loadList();
        }
      });
    },
  },
  mounted() {
    this.loadList();
  },
};
</script>